import React, { useState, useEffect } from 'react';
// import { connect, Dispatch } from 'umi';
import styles from './index.less';
import { CloseOutlined } from '@ant-design/icons';
// import { ConnectProps, ConnectState } from '@/models/connect';
import kls from 'classnames';
import { useSelector, useDispatch } from 'umi';
import Video from '@/components/content/monitor/videoYs';
// import Video from '@/components/content/monitor/video';
import { inExpression } from '@/utils/definitionExpressionHelper';
import layerUtils from '@/utils/arcgis/layer/index';
import { jsapi, viewUtils } from '@/utils/arcgis';

// 展示监控范围效果
async function setWorkingCamera(curVideoId) {
  const view = await viewUtils.isViewReady();
  let cameraEffectLayer = layerUtils.getLayerByTitle(view, 'cameraEffectLayer');
  if (!cameraEffectLayer) {
    return;
  }
  cameraEffectLayer.definitionExpression = inExpression('cameraid', [+curVideoId], {
    isNum: true,
  });
}

const VideoPanel = () => {
  const dispatch = useDispatch();
  const videoList = useSelector(s => s.monitor.videoList);
  const curWorkingTab = useSelector(store => store.app.curWorkingTab);
  const curVideoId = useSelector(s => s.projectPage.curVideoId);
  const urlFromCameraLayer = useSelector(s => s.projectPage.urlFromCameraLayer);
  const [curVideo, setCurVideo] = useState();

  useEffect(() => {
    setWorkingCamera(curVideoId);
    if (!videoList.length || !curVideoId) {
      setCurVideo(void 0);
    }
    let [_curVideo] = videoList.filter(e => e.channelNo == curVideoId);
    setCurVideo(_curVideo);
  }, [curVideoId, videoList]);

  return (
    <div>
      {curVideo && (
        <div
          className={kls('side-panel2', styles.videoPanel, {
            [styles.videoToLeft]: curWorkingTab === 'monitoringIntegration',
            [styles.videoToLeft2]: curWorkingTab === 'progressRendering',
          })}
        >
          <div className="side-panel2-title">
            <div
              style={{
                display: 'inline-flex',
                justifyContent: 'space-between',
                width: '94%',
                alignItems: 'center',
              }}
            >
              <span>视频监控</span>
              <CloseOutlined
                onClick={() => {
                  dispatch({
                    type: 'projectPage/updateState',
                    payload: {
                      curVideoId: '',
                    },
                  });
                }}
              />
            </div>
          </div>
          <div className="side-panel2-body">
            <div className={kls(styles.videoPanelTitle)}>
              <img src={require('./images/监控.png')} alt="" /> {curVideo.deviceName}
            </div>
            <div key={curVideo.liveAddress} className={kls(styles.videoPanelBody)}>
              <Video
                options={{ width: '326px', height: '180px' }}
                // 视频的列表信息无法从图中获取
                url={urlFromCameraLayer || curVideo.liveAddress}
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default VideoPanel;
